<template>
    <div class="codeManage">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="草稿箱" name="0">
                <el-table
                    :data="draftList"
                    border
                    tooltip-effect="dark"
                    style="width: 100%; height: calc(100vh - 240px)"
                    >
                    <el-table-column
                        prop="userVersion"
                        align="center"
                        label="版本号"
                        width="160">
                    </el-table-column>
                    <el-table-column
                        prop="userDesc"
                        align="center"
                        label="描述">
                    </el-table-column>
                    <el-table-column
                        prop="sourceMiniprogram"
                        label="来源小程序"
                        align="center"
                        width="200">
                    </el-table-column>
                    <el-table-column
                        prop="sourceMiniprogramAppid"
                        label="来源小程序ID"
                        align="center"
                        width="200">
                    </el-table-column>
                    <el-table-column
                        prop="developer"
                        label="最近上传开发者"
                        align="center"
                        width="200">
                    </el-table-column>
                    <el-table-column
                        label="最近提交时间"
                        align="center"
                        width="200">
                        <template slot-scope="scope">
                            <div>{{ scope.row.createTime | timestampToMin }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="center"
                        width="200">
                        <template slot-scope="scope">
                            <div style="text-align: center;">
                                <el-button class="checkCard" @click="addTotemplate(scope.row.draftId)" type="text" style="color: #51cdcb;" size="medium">添加到模板库</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="小程序模板库" name="1">
                <el-table
                    :data="templateList"
                    border
                    tooltip-effect="dark"
                    style="width: 100%; height: calc(100vh - 240px)"
                    >
                    <el-table-column
                        prop="userVersion"
                        label="版本号"
                        align="center"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="userDesc"
                        align="center"
                        label="描述">
                    </el-table-column>
                    <el-table-column
                        prop="sourceMiniprogram"
                        label="来源小程序"
                        align="center"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="sourceMiniprogramAppid"
                        label="来源小程序ID"
                        align="center"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="developer"
                        align="center"
                        label="最近上传开发者"
                        width="160">
                    </el-table-column>
                    <el-table-column
                        prop="templateId"
                        label="templateteID"
                        align="center"
                        width="135">
                    </el-table-column>
                    <el-table-column
                        label="添加到模板库时间"
                        align="center"
                        width="200">
                        <template slot-scope="scope">
                            <div>{{ scope.row.createTime | timestampToMin }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="center"
                        width="160">
                        <template slot-scope="scope">
                            <div style="text-align: center;">
                                <el-button class="checkCard" @click="addVersion(scope.row)" type="text" style="color: #51cdcb;" size="medium">添加版本</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <el-dialog class="code-manage-dialog" title="添加小程序版本信息" :visible.sync="dialogVisible">
            <el-form
                :model="dialogForm"
                label-width="100px"
                inline
                label-position="left">
                <el-form-item label="模板ID">
                    <div>{{dialogForm.templateId}}</div>
                </el-form-item>
                <br>
                <el-form-item label="小程序ID">
                    <div>{{dialogForm.appId}}</div>
                </el-form-item>
                <br>
                <el-form-item label="版本号">
                    <el-input v-model="dialogForm.versionNum" auto-complete="off" style="width: 300px;"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="描述">
                    <el-input type="textarea" :rows="2" v-model="dialogForm.desc" auto-complete="off" style="width: 300px;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {getTemplateDraftListApi, getTemplateListApi} from '@/api/api.js'
import { getCookie, sortByCreateTime } from '@/utils/util.js'
import { serverUrl } from "@/utils/server.js";
const Qs = require('qs');
export default {
    data () {
        return {
            dialogVisible: false,
            activeName: '0',
            draftList: [],
            templateList: [],
            dialogForm: {
                templateId: '',
                versionNum: '',
                appId: '',
                desc: ''
            }
        }
    },
    created() {
        if (this.activeName === '0') {
            this.getTemplateDraftList();
        } else if (this.activeName === '1') {
            this.getTemplateList();
        }
    },
    methods: {
        getTemplateDraftList(){
            //  配置请求头
            let headers = new Headers()
            headers.append('token', getCookie('token'))
            headers.append('Content-Type', 'application/x-www-form-urlencoded')
            fetch(serverUrl.baseURL + 'Wechat/getTemplateDraftList', {
                headers: headers,
                method: 'POST'
            }).then(res => {
                return res.json();
            }).then(res => {
                if (res.code === 200) {
                    let draftList = res.data.draftList
                    draftList.sort(sortByCreateTime) // sort排序
                    this.draftList = draftList
                } else {
                    this.$message({
                        message: res.errmsg ? res.errmsg : res.message,
                        type: 'warning'
                    });
                }
                if (res.code === 401) {
                    this.$router.push({path: '/login'})
                }
            }).catch(err => {
                this.$message({
                    message: JSON.stringify(err),
                    type: 'warning'
                });
            });
        },
        getTemplateList() {
            //  配置请求头
            let headers = new Headers()
            headers.append('token', getCookie('token'))
            headers.append('Content-Type', 'application/x-www-form-urlencoded')
            fetch(serverUrl.baseURL + 'Wechat/getTemplateList', {
                headers: headers,
                method: 'POST'
            }).then(res => {
                return res.json();
            }).then(res => {
                if (res.code === 200) {
                    let templateList = res.data.templateList;
                    templateList.sort(sortByCreateTime) // sort排序
                    this.templateList = templateList
                } else {
                    this.$message({
                        message: res.errmsg ? res.errmsg : res.message,
                        type: 'warning'
                    });
                }
                if (res.code === 401) {
                    this.$router.push({path: '/login'})
                }
            }).catch(err => {
                this.$message({
                    message: JSON.stringify(err),
                    type: 'warning'
                });
            });
        },
        addTotemplate(draftId) {
            let params = {
                draftId: draftId
            }
            //  配置请求头
            let headers = new Headers()
            headers.append('token', getCookie('token'))
            headers.append('Content-Type', 'application/x-www-form-urlencoded')
            fetch(serverUrl.baseURL + 'Wechat/addTotemplate', {
                headers: headers,
                method: 'POST',
                body: Qs.stringify(params)
            }).then(res => {
                return res.json();
            }).then(res => {
                if (res.errcode === 0) {
                    this.$message({
                        message: "添加到模板成功,刷新数据",
                        type: 'success'
                    });
                    this.getTemplateDraftList();
                } else {
                    this.$message({
                        message: res.errmsg ? res.errmsg : res.message,
                        type: 'warning'
                    });
                }
                if (res.code === 401) {
                    this.$router.push({path: '/login'})
                }
            }).catch(err => {
                this.$message({
                    message: JSON.stringify(err),
                    type: 'warning'
                });
            });
        },
        handleClick() {
            if (this.activeName === '0') {
                this.getTemplateDraftList();
            } else if (this.activeName === '1') {
                this.getTemplateList();
            }
        },
        addVersion(item) {
            this.dialogForm.templateId = item.templateId
            this.dialogForm.appId = item.sourceMiniprogramAppid
            this.dialogVisible = true
        },
        confirm() {
            let params = this.dialogForm
            //  配置请求头
            let headers = new Headers()
            headers.append('token', getCookie('token'))
            headers.append('Content-Type', 'application/x-www-form-urlencoded')
            fetch(serverUrl.baseURL + 'Wechat/addVersionInfo', {
                headers: headers,
                method: 'POST',
                body: Qs.stringify(params)
            }).then(res => {
                return res.json();
            }).then(res => {
                if (res.errcode === 0) {
                    this.$message({
                        message: "添加小程序版本代码信息成功，刷新数据",
                        type: 'success'
                    });
                    this.getTemplateList();
                } else {
                    this.$message({
                        message: res.errmsg ? res.errmsg : res.message,
                        type: 'warning'
                    });
                }
                if (res.code === 401) {
                    this.$router.push({path: '/login'})
                }
            }).catch(err => {
                this.$message({
                    message: JSON.stringify(err),
                    type: 'warning'
                });
            });
        }
    },
}
</script>
<style lang="scss">
.codeManage{
    background: #fff;
    .code-manage-dialog{
        .el-dialog{
            width: 450px;
            .el-dialog__header{
                text-align: center;
            }
        }
    }
}
</style>
